<template>
  <div class="header-container">
    <!-- 左侧两个按钮 -->
    <div class="header-left">
      <el-menu
        mode="horizontal"
        :default-active="activeIndex"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
      >
        <el-menu-item
          v-for="item in menus"
          :index="item.path"
          :key="item.path"
          >{{ item.name }}</el-menu-item
        >
      </el-menu>
    </div>
    <!-- 右侧的东西 -->
    <div class="header-right">
      <!-- 搜素框 -->
      <search-box v-show="isSearchBoxShouldShow"></search-box>
      <!-- 登录 -->
      <div class="info">
        <!-- 未登录 -->
        <el-button
          @click="login"
          v-if="!isLogin"
          type="primary"
          icon="el-icon-user"
          >登录</el-button
        >
        <!-- 已登录 -->
        <el-dropdown @command="handleCommand" trigger="click" v-else>
          <div class="block">
            <el-avatar size="large" :src="userInfo.avatar"></el-avatar>
          </div>
          <!-- Header的个人信息栏 -->
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="self_info">个人信息</el-dropdown-item>
            <el-dropdown-item command="log_out">登出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-dialog title="个人信息" :visible.sync="dialogVisible" width="40%">
      <personal-information />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import PersonalInformation from "./PersonalInformation.vue";
import SearchBox from "./SearchBox.vue";
import PubSub from "pubsub-js";
export default {
  name: "CommonHeader",
  components: { SearchBox, PersonalInformation },
  data() {
    return {
      menus: [
        {
          name: "课程",
          path: "/home",
        },
        {
          name: "我的",
          path: "/my",
        },
      ],
      dialogVisible: false,
    };
  },
  methods: {
    handleCommand(command) {
      if (command === "log_out") {
        //登出相关操作
        localStorage.removeItem("userInfo");
        this.$router.replace("/login");
      } else if (command == "self_info") {
        // this.$router.push("/personal");
        this.dialogVisible = true;
      }
    },
    login() {
      this.$router.replace("/login");
    },
    confirm() {
      // this.dialogVisible = false;
      PubSub.publish("submitUserInfoChange");
    },
    // 关闭模态框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  computed: {
    userInfo() {
      return JSON.parse(localStorage.getItem("userInfo"));
    },
    activeIndex() {
      const { path } = this.$route;
      // console.log(this.$router);
      if (path == "/" || path == "/home") {
        return "/home";
      } else {
        return "/my";
      }
    },
    isLogin() {
      return !(localStorage.getItem("userInfo") == null);
    },
    isSearchBoxShouldShow() {
      // return this.$router.pa
      return this.$route.path == "/home";
    },
  },
};
</script>

<style lang="less" scoped>
.header-container {
  width: 100%;
  background-color: #545c64;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  .header-left {
    height: 100%;
  }
  .header-right {
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    .info {
      line-height: normal;
    }
  }
}
</style>